<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="资产类别：" name="commodityName">
						<a-select v-model:value="searchFormState.commodityCode"  allow-clear>
							<a-select-option v-for="option in commodityList" :key="option.code" :value="option.code" :label="option.name">
								{{ option.name }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="是否退回" name="isReturn">
						<a-select
							v-model:value="searchFormState.isReturn"
							:options="isReturnList"
							placeholder="请选择是否退回"
							allow-clear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="领取时间" name="createTime">
						<!--						<a-range-picker v-model:value="searchFormState.createTime" value-format="YYYY-MM-DD" show-time />-->
						<a-range-picker
							v-model:value="searchFormState.createTime"
							picker="day"
							format="YYYY-MM-DD"
							style="width: 300px"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="用途" name="purpose">
						<a-input v-model:value="searchFormState.purpose" placeholder="请输入用途" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="部门：" name="collectedDept">
						<a-tree-select
							v-model:value="searchFormState.collectedDept"
							class="xn-wd"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择组织"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:tree-default-expanded-keys="treeDefaultExpandedKeys"
							:field-names="{
						children: 'children',
						label: 'name',
						value: 'id'
					}"
						></a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label ="姓名" name="collectedName">
						<a-input v-model:value="searchFormState.collectedName" placeholder="请输入领取人姓名" />
					</a-form-item>
				</a-col>

				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
			:scroll="{ x: 'max-content' }"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('amsItemPickupRecordAdd')">
						<template #icon>
							<plus-outlined />
						</template>
						新增
					</a-button>
					<xn-batch-button
						v-if="hasPerm('amsItemPickupRecordBatchDelete')"
						buttonName="批量删除"
						icon="DeleteOutlined"
						:selectedRowKeys="selectedRowKeys"
						@batchCallBack="deleteBatchAmsItemPickupRecord"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('amsItemPickupRecordEdit')">编辑</a>
						<a-divider
							type="vertical"
							v-if="hasPerm(['amsItemPickupRecordEdit', 'amsItemPickupRecordDelete'], 'and')"
						/>
						<a-popconfirm title="确定要删除吗？" @confirm="deleteAmsItemPickupRecord(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('amsItemPickupRecordDelete')">删除 </a-button>
						</a-popconfirm>
						<a-button v-if="record.isReturn === 0" type="link" size="small" @click="returnReason.onOpen(record)"
							>退回
						</a-button>
						<!--<a-button v-if="record.isCancel === 0" type="link" size="small" @click="iscancel(record)">作废 </a-button>-->
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
	<ReturnResult ref="returnReason" @successful="table.refresh(true)" />
</template>

<script setup name="itempickuprecord">
	import Form from './form.vue'
	import amsItemPickupRecordApi from '@/api/ams/pickUp/amsItemPickupRecordApi'
	import ReturnResult from './reternResult.vue'
	import amsCommodityInfoApi from '@/api/ams/commodity/amsCommodityInfoApi'
	import bizUserApi from "@/api/biz/bizUserApi";

	let searchFormState = reactive({})
	const searchFormRef = ref()
	const table = ref()
	const returnReason = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const commodity = ref([])
	const commodityList = ref([])
	const treeData = ref([])
	const treeDefaultExpandedKeys = ref([])
	const columns = [
		{
			title: '资产类别',
			dataIndex: 'commodityName'
		} ,
		{
			title: '二级菜单',
			dataIndex: 'officeSuppliesName'
		},
		{
			title: '条形码',
			dataIndex: 'barcode'
		},
		{
			title: '数量',
			dataIndex: 'quantity'
		},
		{
			title: '用途',
			dataIndex: 'purpose'
		},
		{
			title: '备注',
			dataIndex: 'remark'
		},
		{
			title: '领取人姓名',
			dataIndex: 'collectedName'
		},
		{
			title: '领取人部门',
			dataIndex: 'collectedDeptName'
		},
		{
			title: '是否作废',
			customRender: ({ text }) => getIsCancel(text),
			dataIndex: 'isCancel'
		},
		{
			title: '是否退回',
			customRender: ({ text }) => getIsReturn(text),
			dataIndex: 'isReturn'
		},
		{
			title: '领取时间',
			dataIndex: 'createTime'
		},
		{
			title: '商品类型',
			customRender: ({ text }) => getpurchaseTypeLabel(text),
			dataIndex: 'type'
		},
		{
			title: '退回原因',
			dataIndex: 'returnReason'
		}
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['amsItemPickupRecordEdit', 'amsItemPickupRecordDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			fixed: 'right',
			width: '200px'
		})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		// createTime范围查询条件重载
		if (searchFormParam.createTime) {
			searchFormParam.startCreateTime = searchFormParam.createTime[0]
			searchFormParam.endCreateTime = searchFormParam.createTime[1]
			delete searchFormParam.createTime
		}
		return amsItemPickupRecordApi.amsItemPickupRecordPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}
	const iscancel = (record) => {
		let params = {
			id: record.id
		}
		amsItemPickupRecordApi.iscancel(params).then(() => {
			table.value.refresh(true)
		})
	}
	// 删除
	const deleteAmsItemPickupRecord = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		amsItemPickupRecordApi.amsItemPickupRecordDelete(params).then(() => {
			table.value.refresh(true)
		})
	}
	//退回returnAmsItemPickupRecord
	const returnAmsItemPickupRecord = (record) => {
		let params = {
			id: record.id
		}

		amsItemPickupRecordApi.returnAmsItemPickupRecord(params).then(() => {
			table.value.refresh(true)
		})
	}

	const isReturnList = ref([
		{
			value: 0,
			label: '没有退回'
		},
		{
			value: 1,
			label: '已退回'
		}
	])
	const getIsReturn = (value) => {
		const isReturnValue = isReturnList.value.find((item) => item.value === value)
		return isReturnValue ? isReturnValue.label : '未知'
	}
	const isCancelList = ref([
		{
			value: 0,
			label: '没有作废'
		},
		{
			value: 1,
			label: '已作废'
		}
	])
	const getIsCancel = (value) => {
		const isCancelValue = isCancelList.value.find((item) => item.value === value)
		return isCancelValue ? isCancelValue.label : '未知'
	}
	// 批量删除
	const deleteBatchAmsItemPickupRecord = (params) => {
		amsItemPickupRecordApi.amsItemPickupRecordDelete(params).then(() => {
			table.value.clearRefreshSelected()
		})
	}
	const getpurchaseTypeLabel = (value) => {
		const type = typeList.value.find((item) => item.value === value)
		return type ? type.label : '未知'
	}
	const typeList = ref([
		{
			value: 1,
			label: '购买'
		},
		{
			value: 2,
			label: '租赁'
		}
	])
	onMounted(() => {
		// 获取项目列表
		amsCommodityInfoApi.amsCommodityList().then((res) => {
			commodityList.value = res
		})
		// 获取资产类别
		amsCommodityInfoApi.amsCommodityList().then((res) => {
			commodity.value = res
		})
		bizUserApi.userOrgTreeSelector().then((res) => {
			if (res !== null) {
				treeData.value = res
				// 默认展开2级
				treeData.value.forEach((item) => {
					// 因为0的顶级
					if (item.parentId === '0') {
						treeDefaultExpandedKeys.value.push(item.id)
						// 取到下级ID
						if (item.children) {
							item.children.forEach((items) => {
								treeDefaultExpandedKeys.value.push(items.id)
							})
						}
					}
				})
			}
		})
	})
</script>
